<template>
	<div
		:class="[
			'app-icon-text',
			`app-icon-text--${position}`,
			`app-icon-text--${size}`,
			{ ['app-icon-text--no-icon']: !hasIcon },
		]"
	>
		<span class="app-icon-text__icon" v-if="!loading && position == 'left'">
			<icon-font
				v-if="fontIconClass"
				class="app-icon-text__font"
				:type="fontIconClass"
			/>
			<i
				v-else-if="iconClass"
				:class="'app-icon-text__i ' + iconClass"
				:style="getStyle()"
			/>
			<img v-else-if="imgPath" class="app-icon-text__img" :src="getImgPath()" />
		</span>
		<span v-if="text" class="app-icon-text__text" :title="tooltip || text">{{
			text
		}}</span>
		<span class="app-icon-text__icon" v-if="!loading && position == 'right'">
			<icon-font
				v-if="fontIconClass"
				class="app-icon-text__font"
				:type="fontIconClass"
			/>
			<i
				v-else-if="iconClass"
				:class="'app-icon-text__i ' + iconClass"
				:style="getStyle()"
			/>
			<img v-else-if="imgPath" class="app-icon-text__img" :src="getImgPath()" />
		</span>
	</div>
</template>

<script setup lang="ts">
import { iconTextProps } from './icon-text';
import { createFromIconfontCN } from '@ant-design/icons-vue';
import { useAssetPath } from '@/hooks/use-app';
const props = defineProps(iconTextProps);
const hasIcon = computed(() => props.iconClass || props.imgPath);
const IconFont = createFromIconfontCN({
	scriptUrl: useAssetPath('/assets/font-icon.js'),
});
//  是否具有插槽
const hasSlot = (name: string): boolean => {
	return !!useSlots()[name];
};
const getStyle = () => {
	const fontSize = props.fontSize > 0 ? props.fontSize : 14;
	return {
		width: fontSize + 'px',
		height: fontSize + 'px',
	};
};

const getImgPath = () => {
	let imgPath = props.imgPath;
	if (props.imgSize > 0 && props.imgPathX) {
		const rate: number = Math.floor(props.imgSize / 14);
		if (rate == 0) {
			imgPath = props.imgPathX.replace('@{0}x', '');
		} else {
			imgPath = props.imgPathX.replace('@{0}x', `@${rate}x`);
		}
	}
	return imgPath;
};
</script>
